<template>
    <active-panel v-bind="$attrs"
                  v-on="$listeners" :visible.sync="suggestionDialogVisible" v-if="suggestionDialogVisible">
        <el-input
                v-model="msg"
                type="textarea"
                placeholder="请输入备注/处理意见"
                @input="saveSuggestion"
        />
        <div class="btns">
            <more-msg @setSuggestion="setSuggestion"></more-msg>
        </div>
    </active-panel>
</template>
<script>
    import common from "@/api/common/index";
    import ActivePanel from "./ActivePanel";
    import { mapGetters, mapState } from 'vuex'
    import MoreMsg from '../DocumentCase/MoreMsg'

    export default {
        name: "SuggestionDialog",
        props:["row"],
        components: {
          MoreMsg, ActivePanel
        },
        data() {
            return {
              timer:-1
            };
        },
        watch:{
        },
        created() {
          this.$store.dispatch("suggestion/getDocumentTemporary", this.row.id);
        },
        methods: {
            saveSuggestion(val){
                clearTimeout(this.timer)
                this.timer = setTimeout(()=>{
                    if(val == this.msg){
                      this.$store.dispatch("suggestion/setDocumentTemporary", {id:this.row.id,suggestion:val});
                    }
                },3000)
            },
            setSuggestion(msg) {
                this.msg = msg
            },
        },
        computed: {
          ...mapState(['suggestion']),
            isActive(){
              return this.suggestion.isActive
            },
            suggestionDialogVisible:{
              get(){
                return this.isActive
              },
              set(v){
                this.$store.dispatch("suggestion/setIsActive",v)
              }
            },
            msg:{
                get(){
                    return this.suggestion.msg
                },
                set(v){
                     this.$store.dispatch("suggestion/setSuggestion", v);
                }
            },
        },
    };
</script>
<style lang="scss" scoped>
    ::v-deep.el-textarea {
        .el-textarea__inner {
            height: 80px;
            border: none;
        }
    }
    .btns {
        text-align: left;
        display: flex;
        justify-content:start;
        div:first-child {
            padding-top: 18px;
        }
    }
</style>
